List Tile

  • Usage

    Flutter Row widget is used to display its widgets in a horizontal array.

    1. Here is the minimal code to display ListTile inside the ListView widget:

    
                  ListView(
                      children: const [
                        ListTile(
                          leading: Icon(Icons.car_rental),
                          title: Text('Car'),
                          trailing: Icon(Icons.more_vert),
                        ),
                        ListTile(
                          leading: Icon(Icons.flight),
                          title: Text('Flight'),
                          trailing: Icon(Icons.more_vert),
                        ),
                        ListTile(
                          leading: Icon(Icons.train),
                          title: Text('Train'),
                          trailing: Icon(Icons.more_vert),
                        )
                      ],
                    )
    
                    

    Here’s how the code is translated into the design:

    show the data inside the ListTile

    
                      final List<String> items = List<String>.generate(10000, (i) => '$i');
                            ListView.builder(
                              itemCount: items.length,
                              itemBuilder: (context, index) {
                                return ListTile(
                                  leading: CircleAvatar(
                                    backgroundColor: const Color(0xff764abc),
                                    child: Text(items[index]),
                                  ),
                                  title: Text('Item ${items[index]}'),
                                  subtitle: Text('Item description'),
                                  trailing: Icon(Icons.more_vert),
                                );
                              },
                            )
    
                            

    output

    Adding a divider

    
                            ListView(
      children: ListTile.divideTiles(context: context, tiles: [
        ListTile(
          leading: Icon(Icons.car_rental),
          title: Text('Car'),
        ),
        ListTile(
          leading: Icon(Icons.flight),
          title: Text('Flight'),
        ),
        ListTile(
          leading: Icon(Icons.train),
          title: Text('Train'),
        ),
      ]).toList(),
    )